<template>
	<view class="container" :class="{ 'with-top-fixed': checkId && productList.length > 0 }">
		<!-- 顶部固定区域：搜索 + 返回 -->
		<view class="top-fixed" v-if="checkId">
			<view class="search-bar" v-if="productList.length > 0">
				<view class="search-input-wrapper">
					<text class="search-icon">🔍</text>
					<input 
						class="search-input" 
						v-model="searchKeyword" 
						placeholder="搜索商品名称" 
						@input="onSearchInput"
					/>
					<text v-if="searchKeyword" class="clear-icon" @click="clearSearch">✕</text>
				</view>
			</view>
			<view class="back-button" @click="backToList">
				<text class="back-icon">←</text>
				<text class="back-text">返回盘点单列表</text>
			</view>
			<view class="stats-bar" v-if="productList.length > 0">
				<view class="stat-item">
					<text class="stat-label">总商品</text>
					<text class="stat-value">{{ statistics.totalProducts || productList.length }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">已盘点</text>
					<text class="stat-value completed">{{ completedCount }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">有差异</text>
					<text class="stat-value difference">{{ differenceCount }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">差异金额</text>
					<text class="stat-value" :class="{
						'positive': differenceAmount > 0,
						'negative': differenceAmount < 0,
						'zero': differenceAmount === 0
					}">
						{{ differenceAmount >= 0 ? '+' : '' }}¥{{ differenceAmount.toFixed(2) }}
					</text>
				</view>
			</view>
		</view>
		
		<!-- 商品列表 -->
		<view class="product-list" v-if="checkId">

			<!-- 商品卡片 -->
			<view 
				class="product-card" 
				v-for="product in filteredProducts" 
				:key="product.id"
			>
				<!-- 保存按钮 - 右上角 -->
				<view class="save-item-btn-icon" v-if="!isCompleted && (product.actualStock === null || product.actualStock === '' || product.actualStock === undefined)" @click="saveSingleItem(product)">
					<text class="save-icon">✓</text>
				</view>
				
				<!-- 商品图片和基本信息 - 红色框区域 -->
				<view 
					class="product-header-box"
					:class="getHeaderClass(product)"
				>
					<view class="product-image-wrapper">
						<image 
							class="product-image" 
							v-if="product.image" 
							:src="product.image" 
							mode="aspectFill"
						></image>
						<view class="no-image-placeholder" v-else>
							<text class="no-image-text">暂无图片</text>
						</view>
					</view>
					<view class="product-info">
						<text class="product-name">{{ product.name || '未命名商品' }}</text>
						<text class="product-costPrice" v-if="product.costPrice">¥{{ product.costPrice }}</text>
						<text class="product-price">¥{{ product.price || 0 }}</text>
					</view>
				</view>
				
				<!-- 库存信息 -->
				<view class="stock-info">
					<view class="stock-row">
						<text class="stock-label">账面库存：</text>
						<text class="stock-value">{{ product.stock || 0 }}</text>
					</view>
					<view class="stock-row">
						<text class="stock-label">实际库存：</text>
						<input 
							class="stock-input" 
							:class="{ 'disabled': isCompleted }"
							type="number" 
							v-model.number="product.actualStock" 
							placeholder="请输入实际库存"
							:disabled="isCompleted"
							@input="onStockInput(product)"
						/>
					</view>
					<view class="stock-row" v-if="product.actualStock !== null && product.actualStock !== ''">
						<text class="stock-label">差异：</text>
						<text 
							class="stock-difference"
							:class="{
								'positive': getDifference(product) > 0,
								'negative': getDifference(product) < 0,
								'zero': getDifference(product) === 0
							}"
						>
							{{ getDifference(product) > 0 ? '+' : '' }}{{ getDifference(product) }}
						</text>
					</view>
				</view>
				
				<!-- 备注输入 -->
				<view class="remark-row">
					<text class="remark-label">备注：</text>
					<input 
						class="remark-input" 
						:class="{ 'disabled': isCompleted }"
						v-model="product.remark" 
						placeholder="请输入备注（选填）"
						:disabled="isCompleted"
						maxlength="50"
					/>
				</view>
			</view>
		</view>
		<!-- 未创建盘点单时的提示 -->
		<view class="empty-container" v-if="!checkId && !loading && productList.length === 0">
			<!-- 如果有未完成的盘点单，显示继续盘点按钮 -->
			<view v-if="pendingInventory" class="pending-inventory-section">
				<text class="pending-text">发现未完成的盘点单</text>
				<text class="pending-info">盘点单号：{{ pendingInventory.checkNo }}</text>
				<text class="pending-info">已盘点：{{ pendingInventory.checkedProducts }}/{{ pendingInventory.totalProducts }}</text>
				<view class="continue-inventory-btn" @click="continueInventory">
					<text class="continue-btn-text">继续盘点</text>
				</view>
			</view>
		</view>
		<!-- 盘点单列表 -->
		<view class="inventory-records" v-if="inventoryList.length > 0 && !checkId">
			<text class="records-title">盘点单列表</text>
			<view 
				class="inventory-record-card" 
				v-for="record in inventoryList" 
				:key="record.id"
				:class="{ active: record.id === checkId }"
			>
				<view class="record-header">
					<text class="record-no">单号：{{ record.checkNo }}</text>
					<text 
						class="record-status"
						:class="{ completed: record.isCompleted === '1' }"
					>
						{{ record.isCompleted === '1' ? '已完成' : '进行中' }}
					</text>
				</view>
				<view class="record-info">
					<text class="record-info-text">商品总数：{{ record.totalProducts }}</text>
					<text class="record-info-text">已盘点：{{ record.checkedProducts }}</text>
					<text class="record-info-text">差异数：{{ record.diffProducts }}</text>
				</view>
				<view class="record-actions">
					<view 
						class="record-btn"
						:class="{ secondary: record.isCompleted === '1' }"
						@click="openInventory(record)"
					>
						<text class="record-btn-text">
							{{ record.isCompleted === '1' ? '查看' : '继续' }}
						</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部操作栏（未完成的盘点单才显示操作按钮） -->
		<view class="bottom-actions" v-if="checkId && !isCompleted">
			<!--<view class="action-btn reset-btn" @click="resetAll">
				<text class="btn-text">重置</text>
			</view>-->
			<view class="action-btn save-btn" @click="saveStockTake">
				<text class="btn-text">保存盘点</text>
			</view>
			<view class="action-btn complete-btn" @click="completeInventory">
				<text class="btn-text">完成盘点</text>
			</view>
		</view>
		
		<!-- 未创建盘点单时的操作栏 -->
		<view class="bottom-actions" v-if="inventoryList.length >= 0 && !checkId">
			<view class="action-btn create-btn-full" @click="createNewInventory">
				<text class="btn-text">创建新盘点</text>
			</view>
		</view>
		
		<!-- 底部指示器 -->
		<view class="home-indicator"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '',
			productList: [],
			loading: false,
			originalProductList: [], // 保存原始数据用于重置
			checkId: null, // 盘点单ID
			checkNo: '', // 盘点单号
			statistics: {
				totalProducts: 0,
				checkedProducts: 0,
				diffProducts: 0
			},
			searchTimer: null, // 搜索防抖定时器
			pendingInventory: null, // 未完成的盘点单
			inventoryList: [], // 盘点单列表
			isCompleted: false // 当前盘点单是否已完成
		}
	},
	computed: {
		// 过滤后的商品列表（使用API搜索，直接返回productList）
		filteredProducts() {
			return this.productList
		},
		// 已盘点数量
		completedCount() {
			return this.statistics.checkedProducts || this.productList.filter(p => 
				p.actualStock !== null && p.actualStock !== ''
			).length
		},
		// 有差异的数量
		differenceCount() {
			return this.statistics.diffProducts || this.productList.filter(p => {
				if (p.actualStock === null || p.actualStock === '') return false
				return Number(p.actualStock) !== Number(p.stock || 0)
			}).length
		},
		// 差异金额
		differenceAmount() {
			let totalAmount = 0
			this.productList.forEach(product => {
				if (product.actualStock !== null && product.actualStock !== '' && product.actualStock !== undefined) {
					const diff = Number(product.actualStock) - Number(product.stock || 0)
					const price = Number(product.price || 0)
					totalAmount += diff * price
				}
			})
			return totalAmount
		}
	},
	onLoad(options) {
		// 如果传入了盘点单ID，则加载已有盘点单
		if (options.checkId) {
			this.checkId = options.checkId
			this.loadInventoryItems()
		}
		// 无论是否传入，都查询盘点单列表
		this.loadInventoryList()
	},
	methods: {
		// 查询盘点单列表
		loadInventoryList() {
			this.$u.api.inventory.list({
				pageNo: 1,
				pageSize: 50,
				orderBy: 'create_date desc'
			}).then(res => {
				console.log('获取盘点单列表响应:', JSON.stringify(res))
				if (res && res.list) {
					this.inventoryList = res.list.map(item => ({
						id: item.id,
						checkNo: item.checkNo,
						totalProducts: item.totalProducts || 0,
						checkedProducts: item.checkedProducts || 0,
						diffProducts: item.diffProducts || 0,
						isCompleted: item.isCompleted || '0',
						createDate: item.createDate || ''
					}))
					// 查找未完成的盘点单
					this.pendingInventory = this.inventoryList.find(item => item.isCompleted !== '1') || null
					// 如果当前有checkId，同步更新isCompleted状态
					if (this.checkId) {
						const currentInventory = this.inventoryList.find(item => item.id === this.checkId)
						if (currentInventory) {
							this.isCompleted = currentInventory.isCompleted === '1'
						}
					}
				} else {
					this.inventoryList = []
					this.pendingInventory = null
				}
			}).catch(err => {
				console.error('获取盘点单列表失败:', err)
				this.inventoryList = []
				this.pendingInventory = null
			})
		},
		
		// 继续未完成的盘点
		continueInventory() {
			if (this.pendingInventory) {
				this.openInventory(this.pendingInventory)
			}
		},

		// 查看或继续指定盘点单
		openInventory(item) {
			if (!item || !item.id) return
			this.checkId = item.id
			this.checkNo = item.checkNo || ''
			// 设置是否已完成状态
			this.isCompleted = item.isCompleted === '1'
			this.loadInventoryItems()
		},
		
		// 返回到盘点单列表
		backToList() {
			this.checkId = null
			this.checkNo = ''
			this.productList = []
			this.isCompleted = false
			this.searchKeyword = ''
			// 重新加载盘点单列表
			this.loadInventoryList()
		},
		
		// 创建新盘点（用户主动点击）
		createNewInventory() {
			// 直接初始化盘点单，初始化成功后会通过盘点接口获取商品列表
			this.initInventory()
		},
		
		// 初始化盘点单（创建盘点单并初始化所有商品）
		initInventory() {
			this.loading = true
			uni.showLoading({
				title: '初始化盘点单中...',
				mask: true
			})
			
			this.$u.api.inventory.init().then(res => {
				console.log('初始化盘点单响应:', JSON.stringify(res))
				if (res && res.result === 'true' && res.data) {
					// 尝试多种可能的字段名
					this.checkId = res.data.checkId || res.data.id || res.checkId || res.id
					this.checkNo = res.data.checkNo || res.data.checkNo || ''
					// 初始化统计信息
					this.statistics = {
						totalProducts: res.data.totalProducts || 0,
						checkedProducts: res.data.checkedProducts || 0,
						diffProducts: res.data.diffProducts || 0
					}
					// 新创建的盘点单肯定是未完成的
					this.isCompleted = false
					console.log('盘点单初始化成功，checkId:', this.checkId, 'checkNo:', this.checkNo)
					
					if (!this.checkId) {
						uni.hideLoading()
						this.loading = false
						console.error('checkId获取失败，响应数据:', res)
						uni.showToast({
							title: '获取盘点单ID失败',
							icon: 'none'
						})
						return
					}
					
					// 初始化成功后立即加载盘点商品列表
					// 更新loading提示
					uni.showLoading({
						title: '加载商品列表...',
						mask: true
					})
					// 稍微延迟一下，确保后端数据已准备好
					setTimeout(() => {
						this.loadInventoryItems()
						this.loadInventoryList()
					}, 300)
				} else {
					uni.hideLoading()
					this.loading = false
					console.error('初始化盘点单失败，响应:', res)
					uni.showToast({
						title: res.message || '初始化盘点单失败',
						icon: 'none'
					})
				}
			}).catch(err => {
				uni.hideLoading()
				this.loading = false
				console.error('初始化盘点单失败:', err)
				uni.showToast({
					title: '初始化盘点单失败',
					icon: 'none'
				})
			})
		},
		
		// 加载盘点商品列表（查询商品列表）
		loadInventoryItems() {
			if (!this.checkId) {
				this.loading = false
				uni.hideLoading()
				console.error('checkId为空，无法加载商品列表')
				return
			}
			
			// 如果不在加载中，显示loading
			if (!this.loading) {
				this.loading = true
				uni.showLoading({
					title: '加载商品列表...',
					mask: true
				})
			}
			
			// 获取盘点商品列表（支持关键词搜索）
			const params = {}
			if (this.searchKeyword) {
				params.keyword = this.searchKeyword
			}
			
			console.log('开始加载盘点商品列表，checkId:', this.checkId, 'params:', params)
			
			this.$u.api.inventory.getItems(this.checkId, params).then(res => {
				uni.hideLoading()
				this.loading = false
				
				console.log('获取盘点商品列表响应:', JSON.stringify(res))
				
				// 尝试多种数据格式
				let itemList = null
				if (res && res.result === 'true') {
					// 格式1: res.data.itemList
					if (res.data && res.data.itemList) {
						itemList = res.data.itemList
					}
					// 格式2: res.data 直接是数组
					else if (res.data && Array.isArray(res.data)) {
						itemList = res.data
					}
					// 格式3: res.itemList
					else if (res.itemList && Array.isArray(res.itemList)) {
						itemList = res.itemList
					}
					// 格式4: res.list
					else if (res.list && Array.isArray(res.list)) {
						itemList = res.list
					}
				}
				
				if (itemList && itemList.length > 0) {
					this.productList = itemList.map(item => ({
						id: item.productId || item.id,
						checkItemId: item.id, // 盘点明细ID
						name: item.productName || item.name || '',
						image: item.productImage || item.image || '',
						price: item.productPrice || item.price || 0,
						costPrice: item.productCostPrice || item.costPrice || 0,
						stock: item.bookStock || item.stock || 0, // 账面库存
						specification: item.specification || '',
						actualStock: item.actualStock !== null && item.actualStock !== undefined ? item.actualStock : null, // 实际库存
						remark: item.remarks || item.remark || '', // 备注
						isChecked: item.isChecked || '0'
					}))
					// 保存原始数据
					this.originalProductList = JSON.parse(JSON.stringify(this.productList))
					// 加载统计信息
					this.loadStatistics()
					console.log('商品列表加载成功，共', this.productList.length, '个商品')
				} else {
					this.productList = []
					console.log('商品列表为空，响应数据:', res)
					if (res && res.result !== 'true') {
						uni.showToast({
							title: res.message || '获取商品列表失败',
							icon: 'none'
						})
					} else if (res && res.result === 'true') {
						// 成功但列表为空
						console.log('盘点单已创建，但商品列表为空')
					}
				}
			}).catch(err => {
				uni.hideLoading()
				this.loading = false
				console.error('获取盘点商品列表失败:', err)
				console.error('错误详情:', JSON.stringify(err))
				uni.showToast({
					title: '获取商品列表失败: ' + (err.message || '网络错误'),
					icon: 'none',
					duration: 3000
				})
			})
		},
		
		// 加载统计信息
		loadStatistics() {
			if (!this.checkId) return
			
			this.$u.api.inventory.getStatistics(this.checkId).then(res => {
				if (res && res.result === 'true' && res.data) {
					this.statistics = {
						totalProducts: res.data.totalProducts || 0,
						checkedProducts: res.data.checkedProducts || 0,
						diffProducts: res.data.diffProducts || 0
					}
				}
			}).catch(err => {
				console.error('获取统计信息失败:', err)
			})
		},
		
		// 搜索输入（使用API搜索，防抖处理）
		onSearchInput() {
			// 清除之前的定时器
			clearTimeout(this.searchTimer)
			// 延迟500ms执行搜索，避免频繁请求
			this.searchTimer = setTimeout(() => {
				if (this.checkId) {
					this.loadInventoryItems()
				}
			}, 500)
		},
		
		// 清除搜索
		clearSearch() {
			this.searchKeyword = ''
			if (this.checkId) {
				this.loadInventoryItems()
			}
		},
		
		// 库存输入
		onStockInput(product) {
			// 确保输入的是数字
			if (product.actualStock !== null && product.actualStock !== '') {
				product.actualStock = Number(product.actualStock)
			}
		},
		
		// 保存单个盘点明细（只设置值，不调用接口）
		saveSingleItem(product) {
			// 如果实际库存为空，自动填入账面库存
			if (product.actualStock === null || product.actualStock === '' || product.actualStock === undefined) {
				product.actualStock = Number(product.stock || 0)
			}
		},
		
		// 计算差异
		getDifference(product) {
			if (product.actualStock === null || product.actualStock === '') {
				return 0
			}
			return Number(product.actualStock) - Number(product.stock || 0)
		},
		
		// 重置所有数据
		resetAll() {
			if (!this.checkId) {
				uni.showToast({
					title: '盘点单未初始化',
					icon: 'none'
				})
				return
			}
			
			uni.showModal({
				title: '提示',
				content: '确定要重置所有盘点数据吗？重置后将清空所有已输入的实际库存。',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '重置中...',
							mask: true
						})
						
						this.$u.api.inventory.reset(this.checkId).then(result => {
							uni.hideLoading()
							if (result && result.result === 'true') {
								uni.showToast({
									title: '重置成功',
									icon: 'success'
								})
								// 重新加载数据
								this.loadInventoryItems()
							} else {
								uni.showToast({
									title: result.message || '重置失败',
									icon: 'none'
								})
							}
						}).catch(err => {
							uni.hideLoading()
							console.error('重置失败:', err)
							uni.showToast({
								title: '重置失败',
								icon: 'none'
							})
						})
					}
				}
			})
		},
		
		// 保存盘点结果（批量保存盘点明细）
		saveStockTake() {
			if (!this.checkId) {
				uni.showToast({
					title: '盘点单未初始化',
					icon: 'none'
				})
				return
			}
			
			// 检查是否有已盘点的商品
			const completedProducts = this.productList.filter(p => 
				p.actualStock !== null && p.actualStock !== ''
			)
			
			if (completedProducts.length === 0) {
				uni.showToast({
					title: '请至少盘点一个商品',
					icon: 'none'
				})
				return
			}
			
			// 构建盘点明细数据
			const itemList = completedProducts.map(product => ({
				productId: product.id,
				bookStock: product.stock,
				actualStock: Number(product.actualStock), // 实际库存
				remarks: product.remark || '' // 备注
			}))
			
			// 构建请求参数（JSON格式）
			const requestData = {
				checkId: this.checkId,
				itemList: itemList
			}
			
			console.log('保存盘点明细，请求参数:', JSON.stringify(requestData))
			
			uni.showLoading({
				title: '保存中...',
				mask: true
			})
			
			// 批量保存盘点明细（使用JSON格式）
			this.$u.api.inventory.saveItems(requestData).then(res => {
				console.log('保存盘点明细响应:', JSON.stringify(res))
				uni.hideLoading()
				if (res && res.result === 'true') {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					// 保存成功后，更新原始数据和统计信息
					this.originalProductList = JSON.parse(JSON.stringify(this.productList))
					this.loadStatistics()
					this.loadInventoryList()
				} else {
					uni.showToast({
						title: res.message || '保存失败',
						icon: 'none'
					})
				}
			}).catch(err => {
				uni.hideLoading()
				console.error('保存盘点失败:', err)
				uni.showToast({
					title: '保存失败，请重试',
					icon: 'none'
				})
			})
		},
		
		// 完成盘点（更新商品库存）
		completeInventory() {
			if (!this.checkId) {
				uni.showToast({
					title: '盘点单未初始化',
					icon: 'none'
				})
				return
			}
			
			// 判断1：检查是否有未保存的商品（比较当前数据和原始数据）
			const hasUnsavedItems = this.productList.some(product => {
				const originalProduct = this.originalProductList.find(p => p.id === product.id)
				if (!originalProduct) return false
				
				// 检查实际库存是否变化
				const actualStockChanged = String(product.actualStock || '') !== String(originalProduct.actualStock || '')
				// 检查备注是否变化
				const remarkChanged = (product.remark || '') !== (originalProduct.remark || '')
				
				return actualStockChanged || remarkChanged
			})
			
			if (hasUnsavedItems) {
				uni.showModal({
					title: '提示',
					content: '检测到有未保存的商品数据，请先点击"保存盘点"按钮保存后再完成盘点。',
					showCancel: false,
					confirmText: '知道了'
				})
				return
			}
			
			// 判断2：检查是否有未盘点的商品
			const unInventoriedProducts = this.productList.filter(p => 
				p.actualStock === null || p.actualStock === '' || p.actualStock === undefined
			)
			
			if (unInventoriedProducts.length > 0) {
				uni.showModal({
					title: '提示',
					content: `检测到有 ${unInventoriedProducts.length} 个商品未盘点，确定要完成盘点吗？未盘点的商品将保持原库存不变。`,
					success: (res) => {
						if (res.confirm) {
							this.executeCompleteInventory()
						}
					}
				})
				return
			}
			
			// 没有未保存和未盘点的商品，直接执行完成盘点
			uni.showModal({
				title: '确认完成盘点',
				content: '完成盘点后，所有已盘点的商品库存将被更新。此操作不可撤销，确定要继续吗？',
				success: (res) => {
					if (res.confirm) {
						this.executeCompleteInventory()
					}
				}
			})
		},
		
		// 执行完成盘点
		executeCompleteInventory() {
			uni.showLoading({
				title: '完成盘点中...',
				mask: true
			})
			
			this.$u.api.inventory.complete(this.checkId).then(result => {
				uni.hideLoading()
				if (result && result.result === 'true') {
					// 更新为已完成状态
					this.isCompleted = true
					// 更新盘点单列表
					this.loadInventoryList()
					uni.showToast({
						title: '完成盘点成功',
						icon: 'success'
					})
					// 不返回上一页，留在当前页面查看
				} else {
					uni.showToast({
						title: result.message || '完成盘点失败',
						icon: 'none'
					})
				}
			}).catch(err => {
				uni.hideLoading()
				console.error('完成盘点失败:', err)
				uni.showToast({
					title: '完成盘点失败',
					icon: 'none'
				})
			})
		},

		// 根据商品差异设置头部样式
		getHeaderClass(product) {
			if (product.actualStock === null || product.actualStock === '' || product.actualStock === undefined) {
				return ''
			}
			const diff = this.getDifference(product)
			return diff === 0 ? 'header-match' : 'header-diff'
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 120px;
}

.container.with-top-fixed {
	padding-top: 140px;
}

.top-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-bottom: 1px solid #f0f0f0;
}

/* 搜索栏 */
.search-bar {
	background-color: #ffffff;
	padding: 10px 20px;
	border-bottom: 1px solid #f0f0f0;
}

.search-input-wrapper {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 20px;
	padding: 8px 15px;
}

.search-icon {
	font-size: 16px;
	margin-right: 8px;
	color: #999999;
}

.search-input {
	flex: 1;
	font-size: 14px;
	color: #333333;
}

.clear-icon {
	font-size: 18px;
	color: #999999;
	margin-left: 8px;
	padding: 4px;
}

/* 返回按钮 */
.back-button {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	padding: 10px 20px;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
}

.back-icon {
	font-size: 18px;
	color: #333333;
	margin-right: 8px;
	font-weight: bold;
}

.back-text {
	font-size: 14px;
	color: #333333;
}

/* 统计信息栏 */
.stats-bar {
	display: flex;
	background-color: #ffffff;
	padding: 15px 20px;
	border-bottom: 1px solid #f0f0f0;
	margin-top: 0;
}

.stat-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-label {
	font-size: 12px;
	color: #666666;
	margin-bottom: 5px;
}

.stat-value {
	font-size: 14px;
	font-weight: bold;
	color: #333333;
}

.stat-value.completed {
	color: #4CAF50;
}

.stat-value.difference {
	color: #ff4069;
}

.stat-value.positive {
	color: #4CAF50;
}

.stat-value.negative {
	color: #ff4069;
}

.stat-value.zero {
	color: #999999;
}

/* 商品列表 */
.product-list {
	padding: 15px;
}

.empty-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
}

.empty-text {
	font-size: 14px;
	color: #999999;
	margin-bottom: 20px;
}

.empty-text.has-pending {
	margin-top: 30px;
}

.pending-inventory-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30px;
	padding: 20px;
	background-color: #fff5f5;
	border-radius: 12px;
	border: 1px solid #ff4069;
}

.pending-text {
	font-size: 16px;
	font-weight: bold;
	color: #ff4069;
	margin-bottom: 10px;
}

.pending-info {
	font-size: 13px;
	color: #666666;
	margin-bottom: 5px;
}

.continue-inventory-btn {
	margin-top: 15px;
	padding: 12px 30px;
	background-color: #ff4069;
	border-radius: 22px;
}

.continue-btn-text {
	font-size: 15px;
	font-weight: bold;
	color: #ffffff;
}

.create-inventory-btn {
	margin-top: 20px;
	padding: 12px 30px;
	background-color: #333333;
	border-radius: 22px;
}

.create-btn-text {
	font-size: 15px;
	font-weight: bold;
	color: #ffffff;
}

.inventory-records {
	padding: 20px;
	margin-top: -10px;
}

.records-title {
	font-size: 16px;
	font-weight: bold;
	color: #333333;
	margin-bottom: 10px;
	display: block;
}

.inventory-record-card {
	background-color: #ffffff;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 10px;
	border: 1px solid #f0f0f0;
}

.inventory-record-card.active {
	border-color: #333333;
}

.record-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.record-no {
	font-size: 14px;
	color: #333333;
	font-weight: bold;
}

.record-status {
	font-size: 12px;
	color: #ff8a00;
	padding: 2px 8px;
	border-radius: 12px;
	background-color: #fff2e0;
}

.record-status.completed {
	color: #4caf50;
	background-color: #e6f6ea;
}

.record-info {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.record-info-text {
	font-size: 12px;
	color: #666666;
}

.record-actions {
	display: flex;
	justify-content: flex-end;
}

.record-btn {
	padding: 6px 16px;
	background-color: #333333;
	border-radius: 16px;
}

.record-btn.secondary {
	background-color: #f0f0f0;
}

.record-btn-text {
	font-size: 12px;
	color: #ffffff;
}

.record-btn.secondary .record-btn-text {
	color: #333333;
}

.product-card {
	position: relative;
	background-color: #ffffff;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 15px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 商品头部红色框区域 */
.product-header-box {
	display: flex;
	align-items: center;
	padding: 15px;
	background-color: #ffffff;
	border-radius: 8px;
	margin-bottom: 15px;
	border: 2px solid transparent;
}

.product-header-box.header-diff {
	background-color: #fff5f5;
	border-color: #ffefef;
}

.product-header-box.header-match {
	background-color: #e8f7e9;
	border-color: #c4e7cc;
}

.product-image-wrapper {
	width: 80px;
	height: 80px;
	margin-right: 15px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-image {
	width: 80px;
	height: 80px;
	border-radius: 8px;
	background-color: #f0f0f0;
}

.no-image-placeholder {
	width: 80px;
	height: 80px;
	border-radius: 8px;
	background-color: #f0f0f0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid #e0e0e0;
}

.no-image-text {
	font-size: 12px;
	color: #999999;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.product-name {
	font-size: 16px;
	font-weight: bold;
	color: #333333;
	margin-bottom: 8px;
}

.product-costPrice {
	font-size: 14px;
	color: #999999;
	text-decoration: line-through;
	margin-bottom: 5px;
	display: block;
}

.product-price {
	font-size: 18px;
	color: #ff4069;
	font-weight: bold;
}

/* 库存信息 */
.stock-info {
	margin-bottom: 10px;
}

.stock-row {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.stock-label {
	font-size: 13px;
	color: #666666;
	width: 80px;
}

.stock-value {
	font-size: 13px;
	color: #333333;
	font-weight: bold;
}

.stock-input {
	flex: 1;
	font-size: 13px;
	color: #333333;
	padding: 6px 10px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	background-color: #fafafa;
}

.stock-input.disabled {
	background-color: #f5f5f5;
	color: #999999;
	cursor: not-allowed;
}

.stock-difference {
	font-size: 13px;
	font-weight: bold;
}

.stock-difference.positive {
	color: #4CAF50;
}

.stock-difference.negative {
	color: #ff4069;
}

.stock-difference.zero {
	color: #999999;
}

/* 备注 */
.remark-row {
	display: flex;
	align-items: center;
	padding-top: 10px;
	border-top: 1px solid #f0f0f0;
}

.remark-label {
	font-size: 13px;
	color: #666666;
	width: 80px;
}

.remark-input {
	flex: 1;
	font-size: 13px;
	color: #333333;
	padding: 6px 10px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	background-color: #fafafa;
}

.remark-input.disabled {
	background-color: #f5f5f5;
	color: #999999;
	cursor: not-allowed;
}

/* 单个商品保存按钮 - 右上角小图标 */
.save-item-btn-icon {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #4CAF50;
	border-radius: 50%;
	z-index: 10;
	transition: all 0.3s;
}

.save-item-btn-icon:active {
	opacity: 0.8;
	transform: scale(0.9);
}


.save-icon {
	font-size: 16px;
	color: #ffffff;
	font-weight: bold;
	line-height: 1;
}

/* 底部操作栏 */
.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	background-color: #ffffff;
	border-top: 1px solid #f0f0f0;
	padding: 10px 20px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom));
	z-index: 100;
}

.action-btn {
	flex: 1;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 22px;
	margin: 0 3px;
}

.reset-btn {
	background-color: #f5f5f5;
	border: 1px solid #e0e0e0;
}

.save-btn {
	background-color: #333333;
}

.complete-btn {
	background-color: #4CAF50;
}

.btn-text {
	font-size: 15px;
	font-weight: bold;
}

.reset-btn .btn-text {
	color: #333333;
}

.save-btn .btn-text {
	color: #ffffff;
}

.complete-btn .btn-text {
	color: #ffffff;
}

.create-btn-full {
	background-color: #333333;
	color: #ffffff;
	width: 100%;
}

/* 底部指示器 */
.home-indicator {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 4px;
	background-color: #000000;
	border-radius: 2px;
	opacity: 0.3;
}
</style>

